<div class="layui-col-lg12" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
	<div class="layui-row" style="text-align: center;">
		<h1>角色管理</h1>
	</div>
	<div class="layui-row">
		<div class="layui-col-lg12">
			<table id="roleTab" class="layui-hide" lay-filter="roleTab"></table>
		</div>
	</div>
</div>
<script type="text/html" id="toolbarBlock">
	<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
	<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
</script>
<script type="text/html" id="operateBar">
	<button class="layui-btn layui-btn-sm" lay-event="permission">分配权限</button>
	<button class="layui-btn layui-btn-sm" lay-event="menu">分配菜单</button>
</script>

<script>
	layui.use([ 'form', 'table' ], function() {
		var form = layui.form, table = layui.table;
		table.render({
			elem : '#roleTab',
			url : '/sys/role/list',
			parseData : function(res) { //res 即为原始返回的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : res.data.total, //解析数据长度
					"data" : res.data.list
				//解析数据列表
				}
			},
			title : '菜单数据表',
			cellMinWidth : 200,
			defaultToolbar : [ 'filter', 'print', 'exports' ],
			toolbar : '#toolbarBlock',
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'id',
				title : 'ID',
				hide : true,
				width : 80
			}, {
				field : 'name',
				title : '角色名称',
				align : 'center',
			}, {
				field : 'keyword',
				title : '角色KEY',
				align : 'center',
			}, {
				field : 'description',
				title : '角色描述',
				align : 'center',
			}, {
				title : '操作',
				fixed : 'right',
				toolbar : "#operateBar",
				align : 'center',
			} ] ],
			page : true
		});
		table.on('toolbar(roleTab)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = checkStatus.data;
			switch (obj.event) {
			case 'add':
				layer.open({
					type : 2,
					title : '新增角色',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/roleModify'
				});
				break;
			case 'delete':
				if (data.length != 1) {
					layer.msg("请选择一条数据");
					return;
				}
				utils.ajaxUrl("/sys/menu/" + data[0].id, {}, "DELETE", function(res) {
					if (res.code == 0) {
						table.reload('roleTab');
						layer.msg("删除成功!");
						initztree();
					} else {
						layer.msg(res.msg);
					}
				});
				break;
			case 'update':
				if (data.length != 1) {
					layer.msg("请选择一条数据");
					return;
				}
				layer.open({
					type : 2,
					title : '修改角色',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/roleModify?id=' + data[0].id
				});
				break;
			}
		});
		table.on('tool(roleTab)', function(obj) {
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
			if (layEvent === 'permission') {
				layer.open({
					type : 2,
					title : '权限分配',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/role_permission?roleId=' + data.id
				});
			} else if (layEvent === 'menu') {
				layer.open({
					type : 2,
					title : '菜单分配',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/roleMenu?roleId=' + data.id
				});
			}
		});

	});
</script>